<template>
  <div class="app-container">
    <el-card class="tree-card">
      <!-- 用了一个行列布局 -->
      <TreeTools :is-company="true" :node-data="companyInfo" @showAddDialog="showAddDialog" />
      <!-- 分割线 -->
      <hr>
      <!-- 部门树形结构 -->
      <el-tree
        :expand-on-click-node="false"
        :data="depts"
        :props="{label:'name'}"
        default-expand-all
      >
        <!-- 不满足于默认显示，这个组件允许进行插槽自定义 -->
        <template v-slot="scoped">
          <!-- 用了一个行列布局 -->
          <TreeTools
            :is-company="false"
            :node-data="scoped.data"
            @showAddDialog="showAddDialog"
            @showEditDialog="showEditDialog"
            @reloadPage="getDepts"
          />
        </template>

      </el-tree>
    </el-card>
    <AddDepts ref="addDialog" :is-show-dialog="isShowDialog" :node-data="nodeData" @reloadPage="getDepts" @closeDialog="isShowDialog=false" />
  </div>
</template>

<script>
import TreeTools from './components/tree-rools.vue'
import AddDepts from './components/add-depts.vue'
import { getDepts } from '@/api/departments'
export default {
  components: {
    TreeTools, AddDepts
  },
  data() {
    return {
      companyInfo: {
        name: '传智教育',
        manager: '负责人',
        id: ''
      },
      // 部门数组，不算是最顶级公司的那一层
      // name指的是当前节点的名称
      // 如果你有下级节点用chiildren存放
      // 各层之间结构相同
      depts: [],
      isShowDialog: false,
      nodeData: {}
    }
  },
  created() {
    this.getDepts()
  },

  methods: {
    showAddDialog(nodeData) {
      this.nodeData = nodeData
      this.isShowDialog = true
    },
    showEditDialog(nodeData) {
      // 跟新增差不多，唯一多出来的应该时这一刻，让子组件弹窗，回显数据
      this.isShowDialog = true
      this.nodeData = nodeData
      this.$refs.addDialog.getDeptsDetail(nodeData.id)
    },
    async getDepts() {
      const res = await getDepts()
      // console.log('index61', res)
      this.depts = res.depts
      this.depts = this.listToTreeData(res.depts, '')
      // console.log('index64', this.listToTreeData(res.depts, ''))
    },
    listToTreeData(list, id) {
    //   // 传入一个数组，应该是以pid为父子关系链接
    //   // 转换成一个children嵌套的数组
    //   // 我要找子部门，需要两个东西，一个是所有部门的列表，一个是当前部门的id
    //   // 遍历所有部门，哪个部门的pid跟当前部门id相同，就应该属于children
      const res = []
      list.forEach(element => {
        if (element.pid === id) {
          element.children = this.listToTreeData(list, element.id)
          res.push(element)
        }
      })
      return res
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
